<!--后台管理系统框架：管理用户端相关信息-->

<template>
    <div>
        <!-- 头部区域开始 -->
        <div class="nav">
            <!-- logo标题区域 -->
            <div style="width: 220px; display: flex; align-items: center; padding: 0 55px 0 25px">
                <img style="width: 100%; height: 40px;" src="@/assets/imge/logo.png" alt="logo">
            </div>
            <!-- 页面导航 -->
            <div style="flex: 1; display: flex; align-items: center; padding-left: 20px">
                <el-icon><ArrowLeft/></el-icon><span @click="router.push('/manager/managerhome')" style="margin-right: 5px; cursor: pointer;">backHome</span>
                 /
                <span style="margin-left: 5px; cursor: pointer">{{ router.currentRoute.value.meta.name }}</span>
            </div>
            <!-- 头像及相关功能区域 :  width: fit-content 自适应-->
            <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center">
                <el-dropdown>
                    <div style="display: flex; align-items: center">
                        <el-avatar shape="circle" :size="35" fit="cover" :src="url" @error="errorHandler">
                            <img
                                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                             alt="加载错误"/> <!--图片加载失败的回退行为-->
                        </el-avatar>  <!-- :fit="cover" : 当展示类型为图片的时候，设置图片如何适应容器 -->
                        <span style="margin-left: 5px; color: #1d1c1c">您好！ {{ data.username }}</span>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="router.push('/manager/profile')">个人信息</el-dropdown-item>
                            <el-dropdown-item @click="adminlogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <!--  头部区域结束 -->

        <!--  下方区域开始 -->
        <div style="display: flex; background-color: #fffefb; padding-top: 60px; min-height: calc(-100px + 100vh);">
            <!--  菜单区域开始 -->
            <div style="width: 240px; border-right: 1px solid #cccbc8; min-height: 100vh" >
                <!-- 整体菜单 el-menu ： default-active=“需要高亮的页面路径或菜单下标”、default-openeds=“[]”：默认展示的菜单项-->
                <!-- “:” -- 绑定 、 router :路由绑定根据index跳转 、 :default-active="router.currentRoute.value.path，获取当前路由高亮-->
                <el-menu router :default-active="router.currentRoute.value.path">
                    <el-menu-item index="/manager/managerhome">
                        <el-icon><House /></el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/manager/usermanager">
                        <el-icon><User /></el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    <!-- 一级菜单项: el-sub-menu -->
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><Message /></el-icon>
                            <span>消息通知</span>
                        </template>
                        <!-- 二级菜单项: el-menu-item -->
                        <el-menu-item index="/manager/notificationmanager">系统公告</el-menu-item>
<!--                        <el-menu-item index="/manager/userfeedback">用户反馈</el-menu-item>-->
                    </el-sub-menu>
<!--                    <el-sub-menu index="2">-->
<!--                        <template #title>-->
<!--                            <el-icon>-->
<!--                                <img src="@/assets/icon_svg/审核.svg" style="width: 20px; height: 20px" alt="#">-->
<!--                            </el-icon>-->
<!--                            <span>系统审核</span>-->
<!--                        </template>-->
<!--                        &lt;!&ndash; 二级菜单项: el-menu-item &ndash;&gt;-->
<!--                        <el-menu-item index="/manager/contentm">内容审核</el-menu-item>-->
<!--                        <el-menu-item index="/manager/collaborativeDevm">项目审核</el-menu-item>-->
<!--                    </el-sub-menu>-->
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><CollectionTag /></el-icon>
                            <span>分类&标签</span>
                        </template>
                        <!-- 二级菜单项: el-menu-item -->
                        <el-menu-item index="/manager/category">分类管理</el-menu-item>
                        <el-menu-item index="/manager/tags">标签管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon><Setting /></el-icon>
                            <span>系统管理</span>
                        </template>
                        <!-- 二级菜单项: el-menu-item -->
                        <el-menu-item index="/manager/authmanager">权限管理</el-menu-item>
                        <el-menu-item index="/manager/rolemanager">角色管理</el-menu-item>
<!--                        <el-menu-item index="/manager/systemsetting">系统设置</el-menu-item>-->
                    </el-sub-menu>
                </el-menu>
            </div>
            <!--  菜单区域结束 -->

            <!--  数据渲染区域开始 -->
            <div style="flex: 1; width: 0; padding: 10px; background-color: #fffefb">
                <!--子组件渲染到Manager.vue: 涉及菜单嵌套-->
                <RouterView />
            </div>
            <!--  数据渲染区域结束 -->
        </div>
        <!--  下方区域结束 -->

        <!-- 用户未登录或登录已过期弹窗提示开始 -->
        <el-dialog  v-model="data.dialogVisible" width="300" align-center>
            <p style="text-align: center">您未登录或登录已过期，请重新登录登录！</p>
            <template #footer>
                <div class="dialog-footer" style="display: flex; align-items: center; justify-content: center">
                    <el-button type="danger" @click="userLogin">去登录</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 用户未登录或登录已过期弹窗提示结束 -->
    </div>
</template>

<script setup>
import {ref, reactive, toRefs} from "vue";
import {ArrowLeft, CollectionTag, House, Message, Setting, User} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
const router = useRouter()
// router.push('/manager/managerhome')
// 获取本地存储中的用户信息
let user
const loginUser = localStorage.getItem('admin_user');
if (loginUser) {
    // 将拿到的Json数据转化为JavaScript对象
    user = JSON.parse(loginUser);
}

//未登录或注册提示
const data = reactive({
    dialogVisible: false,
    username: user?.username || ''
})
if (user === null) {
    data.dialogVisible = true
}
const userLogin = () => {
    //退回登录页面
    router.push('/adminlogin');
}


//登出逻辑
const adminlogout = () => {
    //退回登录页面
    router.push('/adminlogin');
    // 延迟 0.1 秒（100 毫秒）后刷新页面
    setTimeout(() => {
        location.reload();
        //清空本地存储数据
        localStorage.removeItem('admin_user');
    }, 100);
}

// avatar头像行为
const state = reactive({
    url: user?.profile_photo_path || '',
})
const { url } = toRefs(state)
const errorHandler = () => true //图片加载失败的回退行为

</script>


<style>
.el-menu {
    background-color: #fffefb;
    border: none;

}

/*一级菜单样式*/
.el-sub-menu {
    min-height: 40px;
}

/*一级菜单模板内容样式*/
.el-sub-menu__title {
    height: 40px;
    margin: 4px 4px 0 4px;
    border-radius: 7px;
    background-color: #fffefb;
    font-size: 14px;
}

/*一级菜单鼠标悬停时样式*/
.el-sub-menu__title:hover {
    background-color: #f5f4f1;
}

/*二级子菜单项组件样式*/
.el-sub-menu .el-menu-item {
    height: 40px;
    background-color: #fffefb;
    font-size: 14px;
}

/*<el-menu-item> 菜单项组件样式*/
.el-menu-item {
    height: 40px;
    border-radius: 7px;
    margin: 4px;
    background-color: #fffefb;
    font-size: 14px;
}

/*菜单激活时样式 ：高亮*/
.el-menu .is-active {
    background-color: #fffefb;
    color: #1677ff;
}

/*菜单项组件，非激活状态下鼠标悬停时样式*/
.el-menu-item:not(.is-active):hover {
    background-color: #f5f4f1;
    color: #1677ff;
}

/*下拉框组件样式*/
.el-dropdown {
    /*鼠标移入变手*/
    cursor: pointer;
}

/*el-tooltip工具提示组件样式：el-tooltip__trigger 通常是鼠标悬停、点击等操作时触发显示工具提示内容的元素。*/
.el-tooltip__trigger {
    outline: none;
}

/*后代选择器，它会选中所有具有 el-menu--inline 类的菜单组件内部的 el-menu-item 元素
!important： 优先级设置
*/
.el-menu--inline .el-menu-item {
    padding-left: 48px !important;
}

.el-menu .el-icon {
    font-size: 15px;
}


.nav {
    display: flex;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #cccbc8;
    height: 60px;
    width: 100%;
    background-image: radial-gradient(transparent 1px, #fffefb 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    /*box-shadow: rgba(0, 0, 0, 0.12) 0 0 10px;*/
    z-index: 999;
}
</style>